<!DOCTYPE html>
<html lang="en">
<head>
    <title>修改车辆信息</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">
    <link rel="stylesheet" href="/layui-util/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="/laydate/theme/default/laydate.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>
    <script src="/layui-util/layui.js" charset="utf-8"></script>
</head>
<body>
<script src="/js/webSocket.js"></script>
<div class="row">
    <div class="col-lg-12">
        <section class="panel">
            <div class="panel-body">
                <div class="form" id="app">
                    <form class="cmxform form-horizontal" id="editCarsForm" enctype="multipart/form-data" method="POST"
                          style="width: 1500px;margin: 0 auto;">
                        <input type="hidden" name="carUuid" value="${data.carUuid}">
                        <div class="form-group">
                            <label for="licenseNum" class="control-label col-lg-3"><span style="color: brown;">*</span>车牌号</label>
                            <div class="col-lg-6">
                                <input class=" form-control" id="licenseNum" name="licenseNum"
                                       value="${(data.licenseNum)?default("")}" type="text">
                            </div>
                            <span id="tishi"></span>
                        </div>
                        <div class="form-group ">
                            <label for="color" class="control-label col-lg-3"><span
                                    style="color: brown;">*</span>颜色</label>
                            <div class="col-lg-6">
                                <input class=" form-control" id="color" name="color" type="text"
                                       value="${(data.color)?default("")}">
                            </div>
                        </div>
                        <div class="form-group ">
                            <label for="price" class="control-label col-lg-3"><span
                                    style="color: brown;">*</span>价格</label>
                            <div class="col-lg-6">
                                <input class=" form-control" id="price" name="price" type="text"
                                       value="${(data.price)? string("0.##")}">
                            </div>
                        </div>
                        <div class="form-group ">
                            <label for="buyDate" class="control-label col-lg-3"><span style="color: brown;">*</span>购买日期</label>
                            <div class="col-lg-6">
                                <input class=" form-control" id="buyDate" name="buyDate" type="text"
                                       value="${(data.buyDate)?default("")}">
                            </div>
                        </div>
                        <div class=" form-group ">
                            <label for="engineNum" class="control-label col-lg-3"><span style="color: brown;">*</span>发动机号</label>
                            <div class="col-lg-6">
                                <input class=" form-control" id="engineNum" name="engineNum" type="text"
                                       value="${(data.engineNum)?default("")}">
                            </div>
                        </div>
                        <div class=" form-group ">
                            <label for="brand" class="control-label col-lg-3">
                                <span style="color: brown;">*</span>车辆品牌</label>
                            <div class="col-lg-6">
                                <input class=" form-control" id="brand" name="brand" type="text"
                                       value="${(data.brand)?default("")}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="sate" class="control-label col-lg-3"><span style="color: brown;">*</span>品牌系列</label>
                            <div class="col-lg-6">
                                <input class=" form-control" id="sate" name="brandType" type="text"
                                       value="${(data.brandType)?default("")}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="type" class="control-label col-lg-3"><span
                                    style="color: brown;">*</span>车辆类型</label>
                            <div class="col-lg-6">
                                <select class="form-control m-bot15" name="type">
                                    <option>${(data.type)?default("")}</option>
                                    <option>私家车</option>
                                    <option>商用车</option>
                                    <option>客车</option>
                                    <option>货车</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="brandType" class="control-label col-lg-3"><span style="color: brown;">*</span>座位数</label>
                            <div class="col-lg-6">
                                <input class=" form-control" id="brandType" name="sate" type="text"
                                       value="${(data.sate)?default("")}"/>
                                <input type="hidden" name="oldPicName" value="${(data.pic)? default("")}"/>

                            </div>
                        </div>
                        <div class="form-group ">
                            <label for="brandType" class="control-label col-lg-3"><span
                                    style="color: brown;">*</span>图片上传</label>
                            <div class="col-lg-6">
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" id="demo1" name="file"
                                         width="120px" height="100px" src="/Path/${data.pic}">
                                    <input type="button" class="layui-btn layui-btn-normal" id="test8"
                                           value="上传图片" style="margin-left: 30px">
                                </div>
                            </div>
                        </div>

                </div>

                <div class="form-group">
                    <div class="col-lg-offset-3 col-lg-6">
                        <button class="btn btn-primary" id="saveBtn" type="button">提交</button>
                        <button class="btn btn-default" id="cancelBtn" type="button">取消</button>
                    </div>
                </div>
                </form>
            </div>
    </div>
    </section>
</div>
</div>


</body>
</html>
<script>
    $.validator.setDefaults({
        ignore: ":hidden:not(select)",//解决select 下拉列表不能校验的问题
        submitHandler: function () {
            save();
        }
    });
    jQuery.validator.addMethod("regex", function (value, element, params) {
        var exp = new RegExp(params);
        return exp.test(value);
    }, "格式错误");
    jQuery.validator.addMethod("isNumber", function (value, element) {
        return this.optional(element) || /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(value);
    }, "匹配数值类型，包括整数和浮点数");
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#buyDate',
            them: 'molv',
            format: 'yyyy-MM-dd'
        });
    });
    var check = function () {
        return $("#editCarsForm").validate({
            rules: {
                licenseNum: {
                    required: true,
                    regex: "^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5}$"
                },
                color: {
                    required: true
                },
                price: {
                    required: true,
                    isNumber: true
                },
                buyDate: {
                    required: true
                },
                brandType: {
                    required: true
                },
                brand: {
                    required: true
                },
                engineNum: {
                    required: true
                },
                type: {
                    required: true
                },
                sate: {
                    required: true,
                    range: [2, 10]
                }
            }, messages: {
                licenseNum: {
                    required: "",
                    regex: "车牌号的格式错误"
                },
                color: {
                    required: ""
                },
                price: {
                    required: "",
                    isNumber: "必须为数值类型(正整数或正小数,且小数位不超过2位)"
                },
                buyDate: {
                    required: ""
                },
                brandType: {
                    required: ""
                },
                brand: {
                    required: ""
                },
                engineNum: {
                    required: ""
                },
                type: {
                    required: "请选择一种车型"
                },
                sate: {
                    required: "",
                    range: "座位数不合理"
                }
            }
        });
    };

    var updateCars = function () {
        if (!check().form()) {
            return;
        }
        var formData = new FormData($("#editCarsForm")[0]);
        $.ajax({
            type: 'POST',
            contentType: false,
            processData: false,
            dataType: 'json',
            data: formData,
            url: '/cars/cars_update',
            success: function () {
                $("#cancelBtn").click();
            }
        });
    };

    $("#saveBtn").click(function () {
        updateCars();
    });

    $("#cancelBtn").click(function () {
        var index = parent.layer.getFrameIndex(window.name);
        parent.getCarsPageList();
        parent.layer.close(index);
    });

    layui.use('upload', function () {
        var upload = layui.upload;
        upload.render({
            elem: '#test8',
            auto: false,
            size: 1024,
            exts: 'png|jpg|gif|ico',
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result);
                });
            },
            done: function () {
                return layer.msg("添加成功");
            }
            , error: function () {
                layer.msg("添加失败");
            }
        });
    });
</script>
